<template>
    <div class="app-container">
        <el-form :model="queryParams" size="small" ref="queryParams" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="客资姓名" prop="kzName">
                <el-input v-model="queryParams.kzName" placeholder="请输入客资姓名" clearable
                    @keyup.enter.native="handleQuery(queryParams)" />
            </el-form-item>
            <el-form-item label="客户状态" prop="typeid">
                <el-select v-model="queryParams.typeid" placeholder="用户状态" clearable style="width: 240px">
                    <el-option v-for="dict in typeid" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="分配时间">
                <el-date-picker v-model="queryParams.starttime" type="date" placeholder="开始时间" value-format="timestamp"
                    :picker-options="startDatePicker" style="width: 180px">
                </el-date-picker>
                <el-date-picker v-model="queryParams.endtime" type="date" value-format="timestamp"
                    :picker-options="endDatePicker" placeholder="结束时间" style="width: 180px">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery(queryParams)">搜索
                </el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="kzList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="客资ID" align="center" prop="kzId" />
            <el-table-column label="客资姓名" align="center" prop="kzName" />
            <el-table-column label="联系方式" align="center" prop="kzTel" />
            <el-table-column label="微信号" align="center" prop="kzWechat" />
            <el-table-column label="服务种类" align="center" prop="serveType" />
            <el-table-column label="当前状态" align="center" prop="typename">
            </el-table-column>
            <el-table-column label="聊天及截图" align="center" prop="img">
                <template slot-scope="scope">
                    <div v-for="(item, index) in scope.row.img">
                        <span v-if="scope.row.img == ''">{{ '暂无' }}</span>
                        <el-image v-else :src="item" :key="index" alt="" weight="20" style="width:40px;"
                            :preview-src-list="srcList" @click="look(scope.row)">
                        </el-image>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="是否退回客资" align="center" prop="typeid">
                <template slot-scope="scope">
                    <span v-if="scope.row.typeid == 10">是</span>
                    <span v-else-if="scope.row.typeid == 11">是</span>
                    <span v-else>否</span>
                </template>
            </el-table-column>
            <el-table-column label="跟进起始时间" align="center" prop="kztoshoptime">
                <!-- <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.kztoshoptime, '{YY}-{MM}-{DD}') }}</span>
                </template> -->
            </el-table-column>
            <el-table-column label="跟进记录" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleJiLu(scope.row.kzId)">查看
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column label="订单成交" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleChengJiao(scope.row.kzId)">查看
                    </el-button>
                </template>
            </el-table-column>
            <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="genjin(scope.row)">添加跟进
                    </el-button>
                </template>
            </el-table-column> -->
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList" />
        <!-- 跟进记录 -->
        <el-dialog :visible.sync="open" :title="title" width="500px" append-to-body>
            <div class="block">
                <el-timeline :reverse="reverse">
                    <el-timeline-item :timestamp="timestampToTime(item.changetime)" placement="top"
                        v-for="(item, index) in jiLuList" :key="index">
                        <el-card>
                            <p>跟进状态:{{ zhaungtai(item.typeid) }}</p>
                            <p v-if="item.typeid != 0">跟进人:{{ item.name || '暂无' }}</p>
                            <p v-if="item.typeid == 2">锁单金额:{{ item.msg || '暂无' }}</p>
                            <p v-if="item.typeid == 2"> <span>锁单及凭证:</span>
                                <span v-for="(img1, index) in imgsuodan" :key="index">
                                    <span id="photo" v-if="imgsuodan != ''">
                                        <el-image class="image" :src="img1"
                                            style="width: 80px; height:80px;vertical-align:text-top; margin-left: 5px"
                                            :preview-src-list="srcList2" @click="look2(img1)" />
                                    </span>
                                    <span v-if="imgsuodan == ''">{{ '暂无' }}</span>
                                </span>
                            </p>
                            <p v-if="item.typeid == 2">备注:{{ item.remark || '暂无' }}</p>
                            <p v-if="item.typeid == 3">成交金额:{{ item.msg || '暂无' }}</p>
                            <p v-if="item.typeid == 3"> <span>成交凭证:</span>
                                <span v-for="(img2, index) in imgchengjiao" :key="index">
                                    <span id="photo" v-if="imgchengjiao != ''">
                                        <el-image class="image" :src="img2"
                                            style="width: 80px; height:80px;vertical-align:text-top;margin-left: 5px;"
                                            :preview-src-list="srcList2" @click="look4(img2)" />
                                    </span>
                                    <span v-if="imgchengjiao == ''">{{ '暂无' }}</span>
                                </span>
                            </p>
                            <p v-if="item.typeid == 3">备注:{{ item.remark || '暂无' }}</p>
                            <p v-if="item.typeid == 4">转让原因:{{ item.msg || '暂无' }}</p>
                            <p v-if="item.typeid == 4"> <span>转让凭证:</span>
                                <span v-for="(img3, index) in imgzhuanrang" :key="index">
                                    <span id="photo" v-if="imgzhuanrang != ''">
                                        <el-image class="image" :src="img3"
                                            style="width: 80px; height:80px;vertical-align:text-top;margin-left: 5px"
                                            :preview-src-list="srcList2" @click="look5(img3)" />
                                    </span>
                                    <span v-if="imgzhuanrang == ''">{{ '暂无' }}</span>
                                </span>
                            </p>
                            <p v-if="item.typeid == 4">备注:{{ item.remark || '暂无' }}</p>
                            <p v-if="item.typeid == 5">放弃原因:{{ item.msg || '暂无' }}</p>
                            <p v-if="item.typeid == 5"> <span>放弃凭证:</span>
                                <span v-for="(img4, index) in imgfangqi" :key="index">
                                    <span id="photo" v-if="imgfangqi != ''">
                                        <el-image class="image" :src="img4"
                                            style="width: 80px; height:80px;vertical-align:text-top;margin-left: 5px"
                                            :preview-src-list="srcList2" @click="look6(img4)" />
                                    </span>
                                    <span v-if="imgfangqi == ''">{{ '暂无' }}</span>
                                </span>
                            </p>
                            <p v-if="item.typeid == 5">备注:{{ item.remark || '暂无' }}</p>
                            <p v-if="item.typeid == 6 || item.typeid == 8 || item.typeid == 9 || item.typeid == 13">取消原因:{{
                                item.msg || '暂无'
                            }}
                            </p>
                            <p v-if="item.typeid == 6 || item.typeid == 8 || item.typeid == 9"> <span>取消凭证:</span>
                                <span v-for="(img5, index) in item.img.split(',')" :key="index">
                                    <span id="photo" v-if="item.img != ''">
                                        <el-image class="image" :src="img5"
                                            style="width: 80px; height:80px;vertical-align:text-top; margin-left: 5px"
                                            :preview-src-list="srcList2" @click="look7(img5)" />
                                    </span>
                                    <span v-if="item.img == ''">{{ '暂无' }}</span>
                                </span>
                            </p>
                            <p v-if="item.typeid == 6 || item.typeid == 8 || item.typeid == 9">备注:{{
                                item.remark || '暂无'
                            }}
                            </p>
                            <p v-if="item.typeid == 10 || item.typeid == 11 || item.typeid == 12">退回原因:{{
                                item.msg ||
                                '暂无'
                            }}
                            </p>
                            <p v-if="item.typeid == 10 || item.typeid == 11 || item.typeid == 12"> <span>退回凭证:</span>
                                <!--   :preview-src-list="srcList2" @click="look2(imgurl1)"  -->
                                <span v-for="(img6, index) in item.img.split(',')" :key="index">
                                    <span id="photo" v-if="item.img != ''">
                                        <el-image class="image" :src="img6"
                                            style="width: 80px; height:80px;vertical-align:text-top;margin-left: 5px"
                                            :preview-src-list="srcList2" @click="look8(img6)" />
                                    </span>
                                    <span v-if="item.img == ''">{{ '暂无' }}</span>
                                </span>
                            </p>
                            <p v-if="item.typeid == 13"> <span>取消锁单凭证:</span>
                                <!--   :preview-src-list="srcList2" @click="look2(imgurl1)"  -->
                                <span v-for="(img7, index) in imgqxsuodan" :key="index">
                                    <span id="photo" v-if="imgqxsuodan != ''">
                                        <el-image class="image" :src="img7"
                                            style="width: 80px; height:80px;vertical-align:text-top;margin-left: 5px"
                                            :preview-src-list="srcList2" @click="look9(img7)" />
                                    </span>
                                    <span v-if="imgqxsuodan == ''">{{ '暂无' }}</span>
                                </span>
                            </p>
                            <p v-if="item.typeid == 10 || item.typeid == 11 || item.typeid == 12 || item.typeid == 13">备注:{{
                                item.remark ||
                                '暂无'
                            }}
                            </p>
                        </el-card>
                    </el-timeline-item>
                </el-timeline>
            </div>
        </el-dialog>
        <!-- 成交记录 -->
        <el-dialog :visible.sync="open1" width="800px" append-to-body>
            <el-table :data="CJList">
                <el-table-column label="成交时间" align="center" prop="changetime">
                    <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.changetime, '{YY}-{MM}-{DD} {hh}:{mm}:{ss}') }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="成交金额" align="center" prop="msg" />
                <el-table-column label="成交凭证" align="center" prop="img">
                    <template slot-scope="scope">
                        <div v-for="(item, index) in scope.row.img">
                            <span v-if="scope.row.img == ''">{{ '暂无' }}</span>
                            <el-image v-else :src="item" style="width:40px;" :preview-src-list="srcList3"
                                @click="look3(scope.row)"></el-image>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="备注" align="center" prop="remark">
                    <template slot-scope="scope">
                        <span v-if="scope.row.remark == ''">{{ "暂无" }}</span>
                        <span v-if="scope.row.remark != ''">{{ scope.row.remark }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>
<script>
import { shopKzSearch, selectAllKz, selectjilu, selectChengjiaoShop, selectAllShopResourcesPC, selectAllTimeKz } from "@/api/business/userlist.js";
import { getToken } from '@/utils/auth'
export default {
    data() {
        return {
            fileList: [],
            headers: {
                Authorization: "Bearer " + getToken(),
            },
            reverse: true,
            srcList: [],
            srcList1: [],
            srcList2: [],
            srcList3: [],
            srcList4: [],
            // 客户状态
            typeid: [{
                value: 0,
                label: '待领取'
            }, {
                value: 1,
                label: '已领取'
            }, {
                value: 2,
                label: '活动锁单'
            }, {
                value: 3,
                label: '订单成交'
            }, {
                value: 4,
                label: '转让客资'
            }, {
                value: 5,
                label: '放弃客资'
            }, {
                value: 6,
                label: '取消订单申请'
            }, {
                value: 8,
                label: '取消订单成功'
            }, {
                value: 9,
                label: '取消订单失败'
            }, {
                value: 10,
                label: '退回客资申请'
            }, {
                value: 11,
                label: '退回客资成功'
            }, {
                value: 12,
                label: '退回客资失败'
            }, {
                value: 13,
                label: '取消活动锁单'
            }],
            // 跟进类型
            addtype: [{
                value: 0,
                label: '活动锁单'
            }, {
                value: 1,
                label: '订单成交'
            }, {
                value: 2,
                label: '转让客资'
            }, {
                value: 3,
                label: '放弃客资'
            }, {
                value: 4,
                label: '取消订单'
            }, {
                value: 5,
                label: '客资退回'
            }],
            loade: {
                shopid: null,
                kzId: null
            },
            queryParams: {
                kzName: '',
                typeid: '',
                starttime: '',
                endtime: '',
                pageNum: 1,
                pageSize: 10,
                shopid: ''
            },
            // 显示搜索条件
            showSearch: true,
            kzList: [],
            total: 0,
            // 是否显示弹出层
            open: false,
            open1: false,
            open2: false,
            // 查看跟进记录
            jiLuList: [],
            // 查看成交记录
            CJList: [],
            imgsuodan: '',
            imgqxsuodan: '',
            imgchengjiao: '',
            imgzhuanrang: '',
            imgfangqi: '',
            imgquxiao: '',
            imgtuihui: '',
            img: '',
            kzSuccessPic: '',
            title: '',
            title2: '',
            form: {},
            rules: {},
            startDatePicker: this.beginDate(),
            endDatePicker: this.processDate(),
            date1: {
                shopid: this.$route.query.shopid,
                pageNum: 1,
                pageSize: 10
            }
        }
    },
    created() {
        this.getList()
    },
    methods: {
        // 获取客资列表
        async getList() {
            this.loading = true;
            let res = await selectAllKz({
                shopid: this.$route.query.shopid,
                kzId: this.$route.query.kzId
            });
            if (res.code == 200) {
                this.loading = false;
                this.kzList = res.data.data;
                if (res.data.data != undefined) {
                    res.data.data.forEach(item => {
                        item.img = item.img.split(',')
                    });
                    this.queryParams.shopid = this.$route.query.shopid;
                }

            } else {
                this.$modal.msgError(res.data.msg);
            }
        },
        // 搜索按钮操作
        handleQuery(queryParams) {
            if (this.queryParams.starttime == '' && this.queryParams.endtime == "") {
                selectAllKz(queryParams).then(response => {
                    if (response.code == 200) {
                        this.kzList = response.data.data;
                        response.data.data.forEach(item => {
                            item.img = item.img.split(',')
                        })
                    } else {
                        this.$modal.msgError(response.data.msg);
                    }
                });
            } else if (this.queryParams.starttime == "" && this.queryParams.endtime != '') {
                this.$modal.msgError("请输入开始时间");
            } else if (this.queryParams.starttime != '' && this.queryParams.endtime == '') {
                this.$modal.msgError("请输入结束时间");
            } else if (this.queryParams.starttime != '' && this.queryParams.endtime != '' && this.queryParams.starttime > this.queryParams.endtime) {
                this.$modal.msgError("结束时间必须大于开始时间");
            } else if (this.queryParams.starttime != '' && this.queryParams.endtime != '' && this.queryParams.starttime < this.queryParams.endtime) {
                selectAllKz(queryParams).then(response => {
                    if (response.code == 200) {
                        this.kzList = response.data.data;
                        response.data.data.forEach(item => {
                            item.img = item.img.split(',')
                        })
                    } else {
                        this.$modal.msgError(response.data.msg);
                    }
                });
            } else if (this.queryParams.startTime == this.queryParams.endTime) {
                this.$modal.msgError("结束时间必须大于开始时间");
            }
        },
        // 重置按钮操作
        resetQuery() {
            this.queryParams = {
                kzName: '',
                typeid: '',
                starttime: '',
                endtime: '',
                pageNum: 1,
                pageSize: 10
            },
                this.getList();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            for (let i = 0; i < selection.length; i++) {
                selection.shopid = selection[i].shopid
            }
            this.searchdata.shopid = selection.shopid
        },
        // 查看跟进记录操作
        handleJiLu(kzId) {
            this.open = true
            this.title = "跟进记录"
            selectjilu({ kzId, shopid: this.$route.query.shopid }).then(response => {
                response.data.data.forEach(item => {
                    if (item.img != '') {
                        // else if (item.typeid == 6 || item.typeid == 8 || item.typeid == 9) {
                        //     this.imgquxiao = item.img.split(',');
                        // } else if (item.typeid == 10 || item.typeid == 11 || item.typeid == 12) {
                        //     this.imgtuihui = item.img.split(',');
                        // }
                        if (item.typeid == 2) {
                            this.imgsuodan = item.img.split(',');
                        } else if (item.typeid == 3) {
                            this.imgchengjiao = item.img.split(',');
                        } else if (item.typeid == 4) {
                            this.imgzhuanrang = item.img.split(',');
                        } else if (item.typeid == 5) {
                            this.imgfangqi = item.img.split(',');
                        }  else if (item.typeid == 13) {
                            this.imgqxsuodan = item.img.split(',');
                        }
                    }
                });
                this.jiLuList = response.data.data;
            })
        },
        // 查看成交记录
        handleChengJiao(kzId) {
            this.open1 = true;
            selectChengjiaoShop({ kzId, shopid: this.$route.query.shopid }).then(response => {
                if (response.data.code == 200) {
                    response.data.data.forEach(item => {
                        item.img = item.img.split(',');
                        this.srcList3 = item.img;
                    })
                    this.CJList = response.data.data;
                }
            })
        },
        look(row) {
            this.srcList = row.img;
        },
        look1(row) {
            this.srcList1 = row.img;
        },
        look2(img1) {
            this.srcList2.push(img1);
        },
        look3(row) {
            this.srcList3 = row.img;
        },
        look4(img2) {
            this.srcList2.push(img2);
        },
        look5(img3) {
            this.srcList2.push(img3);
        },
        look6(img4) {
            this.srcList2.push(img4);
        },
        look7(img5) {
            this.srcList2.push(img5);
        },
        look8(img6) {
            this.srcList2.push(img6);
        },
        look8(img6) {
            this.srcList2.push(img6);
        },
        look9(img7) {
            this.srcList2.push(img7);
        },
        //  客户状态
        zhaungtai(val) {
            if (val == 0) {
                return "待领取"
            } else if (val == 1) {
                return "已领取"
            } else if (val == 2) {
                return "活动锁单"
            } else if (val == 3) {
                return "订单成交"
            } else if (val == 4) {
                return "转让客资"
            } else if (val == 5) {
                return "放弃客资"
            } else if (val == 6) {
                return "取消订单申请"
            } else if (val == 8) {
                return "取消订单成功"
            } else if (val == 9) {
                return "取消订单失败"
            } else if (val == 10) {
                return "客资退回申请"
            } else if (val == 11) {
                return "客资退回成功"
            } else if (val == 12) {
                return "客资退回失败"
            } else if (val == 13) {
                return "取消活动锁单"
            }
        },
        // 时间戳转时间
        timestampToTime(timestamp, state) {
            let now = new Date(timestamp),
                y = now.getFullYear(),
                m = now.getMonth() + 1,
                d = now.getDate();
            if (state == 0) {

            } else {
                return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " " + now.toTimeString().substr(0, 8);
            }
        },
        // 上传截图
        handleRemove(file, fileList) {
            this.fileList = fileList;
            let Alist = [];
            let List = [];
            this.fileList.forEach(item => {
                if (item != file) {
                    Alist.push(item)
                }
            })
            this.fileList = Alist;
            this.fileList.forEach(item => {
                if (item.response) {
                    List.push(item.response.data)
                } else {
                    List.push(item.url)
                    // this.srcList_s.push(item.url)
                }
            });
            this.form.pics = List.join(',')
        },
        handlePreview(response, file, fileList) {
            this.fileList = fileList;
            let List = [];
            this.fileList.forEach(item => {
                if (item.response) {
                    List.push(item.response.data)
                } else {
                    List.push(item.url)
                }

            });
            this.form.pics = List.join(',');
        },
        handleExceed() {
            this.$modal.msgError('最多上传三张图片')
        },
        // 添加跟进
        genjin() {
            this.open2 = true;
            this.title2 = "添加跟进";
        },
        // 验证搜索框日期
        beginDate() {
            const self = this;
            return {
                disabledDate(time) {
                    //           debugger;
                    if (self.endTime) {
                        //如果结束时间不为空，则小于结束时间
                        return new Date(self.endTime).getTime() < time.getTime();
                    } else {
                        return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
                    }
                },
            };
        },
        processDate() {
            const self = this;
            return {
                disabledDate(time) {
                    if (self.startTime) {
                        //如果开始时间不为空，则结束时间大于开始时间
                        return new Date(self.startTime).getTime() > time.getTime();
                    } else {
                        return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
                    }
                },
            };
        },
    }
}
</script>
<style scoped></style>